{% extends "Buyer/base.html" %}
{% load static %}

{% block content %}
<style>
    /* 新增轮播图样式 */
    .carousel-container {
        width: 560px; /* 保持原有图片尺寸 */
        height: 546px;
        position: relative;
        overflow: hidden;
        float: left; /* 保持原有浮动 */
        margin-right: 30px; /* 与原布局一致 */
    }
    .carousel-slide {
        position: relative;
        height: 100%;
    }
    .carousel-item {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.5s ease;
    }
    .carousel-item.active {
        opacity: 1;
    }
    .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .carousel-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }
    .carousel-nav button {
        background: rgba(101,160,52,0.8);
        color: white;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        border-radius: 50%;
        font-size: 18px;
    }
    .carousel-dots {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
    }
    .carousel-dot {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: rgba(255,255,255,0.5);
        cursor: pointer;
        border: 2px solid #65a034;
    }
    .carousel-dot.active {
        background: #65a034;
    }
</style>

<div class="goods_type">
    <div class="goods_details"><a href="#">首页</a> >{{ goods_obj.goods_name }}</div>
    <div class="goods_box">
        <!-- 轮播图区域 -->
        <div class="carousel-container">
            <div class="carousel-slide">
                {% for image in goods_obj.image_set.all %}
                <div class="carousel-item {% if forloop.first %}active{% endif %}">
                    <img src="{% static image.img_address.name %}" alt="商品图片">
                </div>
                {% endfor %}
            </div>
            <div class="carousel-nav">
                <button class="carousel-prev">❮</button>
                <button class="carousel-next">❯</button>
            </div>
            <div class="carousel-dots">
                {% for image in goods_obj.image_set.all %}
                <button class="carousel-dot {% if forloop.first %}active{% endif %}"></button>
                {% endfor %}
            </div>
        </div>

        <!-- 商品详情区域（保持原样） -->
        <div class="box_details">
            <form method="post" action="/Buyer/car_jump/?id={{ goods_obj.id }}">
                {% csrf_token %}
                <h1>{{ goods_obj.goods_name }}</h1>
                <span style='font-size: 15px;'>{{ goods_obj.goods_description|safe }}</span>

                <div class="box_bg">
                    价格：￥<span class="price_span">
                    {{ goods_obj.goods_cprice }}</span>
                    元&nbsp;&nbsp;原价:￥<s style='color: #ff0000'> {{ goods_obj.goods_oprice }}</s>
                </div>
                <div class="address">配送: 顺丰快递</div>
                <div class="address">存储方: 适宜的环境</div>
                <div class="address">库存: {{ goods_obj.goods_kucun }}</div>

                <div class="num">数量：
                    <input type="button" name="-" value="-" class="btn1" onclick="dec()"/>
                    <input type="text" value="1" id="count" name="count" class="text1"/>
                    <input type="button" name="+" value="+" class="btn1" onclick="add()"/>
                </div>
                <input type="hidden" name="goods_name" value="{{ goods_obj.goods_name }}">
                <input type="hidden" name="goods_cprice" value="{{ goods_obj.goods_cprice }}">
                <input type="hidden" name="goods_img_path" value="{{ goods_obj.image_set.first.img_address.name }}">
                <div class="btn2"><input type="submit" value="加入购物车" class="gouwu"/></div>
            </form>
        </div>

        <!-- 商品热度区域（保持原样） -->
        <div class="goods_heat_big_div">
            <div class="goods_heat_big_title">商品热度</div>
            <div class="goods_heat_title">销售量:{{ goods_obj.goods_sales }}</div>
            <div class="goods_heat_title">评论量:{{ goods_comment_list.count }}</div>
            <div class="goods_heat_title">浏览量:{{ goods_obj.goods_browses }}</div>
            <div class="goods_heat_title">收藏量:{{ goods_collect_list.count }}</div>
            <a href="/Buyer/goods_collection/?id={{ goods_obj.id }}&collect_state=1" class="goods_a1">我要收藏</a>
            <a href="/Buyer/goods_collection/?id={{ goods_obj.id }}&collect_state=0" class="goods_a2">取消收藏</a>
        </div>
    </div>
</div>

<script>
    // 轮播图逻辑
    let currentIndex = 0;
    const items = document.querySelectorAll('.carousel-item');
    const dots = document.querySelectorAll('.carousel-dot');
    const totalItems = items.length;

    function updateCarousel() {
        items.forEach(item => item.classList.remove('active'));
        dots.forEach(dot => dot.classList.remove('active'));
        items[currentIndex].classList.add('active');
        dots[currentIndex].classList.add('active');
    }

    // 自动播放
    let autoPlay = setInterval(() => {
        currentIndex = (currentIndex + 1) % totalItems;
        updateCarousel();
    }, 5000);

    // 按钮事件
    document.querySelector('.carousel-prev').addEventListener('click', () => {
        clearInterval(autoPlay);
        currentIndex = (currentIndex - 1 + totalItems) % totalItems;
        updateCarousel();
    });

    document.querySelector('.carousel-next').addEventListener('click', () => {
        clearInterval(autoPlay);
        currentIndex = (currentIndex + 1) % totalItems;
        updateCarousel();
    });

    // 指示点事件
    dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            clearInterval(autoPlay);
            currentIndex = index;
            updateCarousel();
        });
    });

    // 悬停暂停
    const container = document.querySelector('.carousel-container');
    container.addEventListener('mouseenter', () => clearInterval(autoPlay));
    container.addEventListener('mouseleave', () => {
        autoPlay = setInterval(() => {
            currentIndex = (currentIndex + 1) % totalItems;
            updateCarousel();
        }, 5000);
    });

    // 原有数量逻辑
    function add() {
        let countInput = document.getElementById('count');
        let current = parseInt(countInput.value);
        if (current < {{ goods_obj.goods_kucun }}) {
            countInput.value = current + 1;
        } else {
            alert("库存不足，最大可购数量为{{ goods_obj.goods_kucun }}");
        }
    }

    function dec() {
        let countInput = document.getElementById('count');
        let current = parseInt(countInput.value);
        if (current > 1) {
            countInput.value = current - 1;
        }
    }
</script>

<!-- 保持原有其他部分 -->
<div class="goods_type1">
        <div class="type1_left">
            <div class="type1_top">其他商品</div>
            <div class="type1_bottom">

                {% for goods_obj in goods_list %}
                    <a href="/Buyer/goods_details/?id={{ goods_obj.id }}">
                        <dl>
                            <dt><img src="{% static goods_obj.image_set.first.img_address.name %}"/></dt>
                            <dd>
                                <span class="pname">
                                    {{ goods_obj.goods_name }}
                                </span>
                                <p class="price">￥{{ goods_obj.goods_cprice }}</p>
                            </dd>
                        </dl>
                    </a>
                {% endfor %}

            </div>
        </div>

        <div class="goods_details_div">
            <form method="post" action="/Buyer/goods_details/">
                {% csrf_token %}
                <input type="hidden" name="spxq" value="商品详情">
                <input type="hidden" name="id" value="{{ goods_obj.id  }}">
                <input type="submit" value="商品详情" class="type1_top"/>
            </form>
        </div>

        <div class="goods_details_div">
            <form method="post" action="/Buyer/goods_comments/">
                {% csrf_token %}
                <input type="hidden" name="sppl" value="商品评论">
                <input type="hidden" name="id" value="{{ goods_obj.id  }}">
                <input type="submit" value="商品评论" class="type1_top"/>
            </form>

        </div>

        <div class="types_div">

            <div class="type1_bottom">
                {{ goods_obj.goods_details|safe }}
            </div>

        </div>
    </div>

{% endblock %}